//数据
let lists = ["学习 Javascript", "学习 CSS3", "学习 HTML5"];

function d() {
    document.querySelector('#ul').innerHTML = ''
//创建一个for循环
    for (let i = 0; i < lists.length; i++) {
        //创建li标签
        let li = document.createElement('li');
        li.classList.add('list-group-item');
        li.classList.add('d-flex');
        li.classList.add('justify-content-between');
        li.classList.add('align-items-center');

        let span = document.createElement('span')
        let spanText = document.createTextNode(lists[i])
        //把文本内容，追加到创建的span标签里面
        span.appendChild(spanText)

        span.addEventListener('dblclick', function () {
            this.setAttribute('contenteditable', true)
        })


        let button = document.createElement('button')
        button.type = 'button'
        button.classList.add('close')
        button.innerHTML = '&times;'


        button.addEventListener('click',function(){
            console.log(i)
            lists.splice(i,1)
            d()
        })

        li.appendChild(span)
        li.appendChild(button)

        let ul = document.querySelector('#ul')
        ul.appendChild(li)
    }
}

d()


let ipt = document.querySelector("#ipt")
let btn = document.querySelector("#btn")
btn.addEventListener('click', function () {
    if (ipt.value != '') {
        lists.push(ipt.value)
    } else {
        alert("请输入内容")
    }
    d()
})